<template>
    <Modal v-model="modal"  title="选择图片" width="1040" :mask-closable="false">
        <Steps :current="current" class="step" style="width: 75%;margin-left:25%; margin-bottom: 15px;">
            <Step title="从素材库选择封面" content=""></Step>
            <Step title="裁切封面" content=""></Step>
        </Steps>

        <ImageView ref="stepOne" :callback="getChoiseUrl"></ImageView>

        <ImageCropper ref="stepTwo" :callback="getCropperImage" :fixedNumber="fixedNumber"></ImageCropper>
        
        <div slot="footer" style="width: 25%;margin: auto;" v-show="stepOne.show">
            <Button type="primary" size="large" long :disabled="stepOne.disabled" @click="stepOneClick" >下一步</Button>
        </div>
        <div slot="footer" style="width: 25%;margin: auto;text-align: center;" v-show="stepTwo.show">
            <Button @click="backOne">上一步</Button>
            <Button @click="finish" type="primary" :loading="loading">完成</Button>
        </div>
    </Modal>
</template>
<script>
    import {Button,Modal,Steps} from 'iview';
    
    import ImageCropper from './image-cropper';
    import ImageView from './image-view';

    export default{
        components:{
            Button,
            Modal,
            ImageView,
            Steps,
            'Step' : Steps.Step,
            ImageCropper,
        },
        props :{
            callback:{
                type: Function,
                required : true,
            },
            fixedNumber:{
                type: Array,
                required : true,
            },
        },
        data () {
            return {
                modal :false,
                choiseImageUrl : '',
                current : 0,
                stepOne :{
                    show : true,
                    disabled : true,
                },
                stepTwo :{
                    show : false,
                },
                loading : false,
            }
        },
        methods:{
            choiseImage(){
                this.modal = true;
            },
            getChoiseUrl(url){
                this.choiseImageUrl = url;
            },
            //点击第一步
            stepOneClick(){
                this.stepOne.show = false;
                this.stepOneHide();
                this.current = 1;
                this.stepTwo.show = true;
                this.stepTwoShow();
            },
            //返回第一步
            backOne(){
                this.current = 0;
                this.stepOne.show = true;
                this.$refs.stepOne.show = true;

                this.stepTwoHide();
            },
            //第一步显示
            stepOneShow(){
                // this.choiseImageUrl = '';
                this.$refs.stepOne.show = true;
                this.$refs.stepOne.reset();
                this.$refs.stepOne.init();

                this.stepOne.show = true;
                this.stepOne.disabled = true;
            },
            //第一步隐藏
            stepOneHide(){
                this.$refs.stepOne.show = false;
                this.stepOne.show = false;
                this.stepOne.disabled = false;
            },
            //第二步显示
            stepTwoShow(){
                this.$refs.stepTwo.show = true;
                this.$refs.stepTwo.cropper.img = this.choiseImageUrl;
            },
            //第二步隐藏
            stepTwoHide(){
                this.stepTwo.show = false;
                this.$refs.stepTwo.show = false;
            },
            //完成
            finish(){
                this.$refs.stepTwo.getCropper();
            },
            //获得剪切的图片,并上传
            getCropperImage(data){
                var param= {pic :data,fileArea:'wechats'};
                this.loading = true;
                this.Axios.Wechat.Manager.Material.Image.Upload(param)
                .then(res =>{
                    if(!res) return false;
                    this.loading = false;
                    this.callback(res.data.url,this.choiseImageUrl);
                    this.modal = false;
                })
            }
        },
        watch:{
            modal:function(bool){
                if(bool){
                    this.stepOneShow();
                }else{
                    this.stepTwoHide();
                }
            },
            choiseImageUrl:function(vue){
                if(vue=='') this.stepOne.disabled = true;
                else this.stepOne.disabled = false;
            }
        }
    }
</script>